<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>IFE-Task_07</title>
</head>
<link rel="stylesheet" href="stylesheet/index.css">
<body>

<header>
	<div class="logo">新世界</div>
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">最新活动</a></li>
		<li><a href="#">项目介绍</a></li>
		<li><a href="#">爱心社区</a></li>
		<li><a href="#">关于我们</a></li>
		<li class="login"><a href="#">登录</a></li>
	</ul>
</header>

<main>
	<section class="sec1">
		<div class="sec1_wrap">
			<h1>Time of new life</h1>
			<p>新时代，年轻的人们让我们一起</p>
			<p>体验新生活，享受新生活</p>
			<a class="sec1_btn" href="#">开始体验</a>
		</div>
	</section>

	<section class="sec2">
		<span class="sec2_gridle">
			<img src="images/info1.png">
			<div>打造全新世界观，让你更</div>
			<div>爱你的生活</div>
		</span>
		<span class="sec2_gridle">
			<img src="images/info2.png">
			<div>丰富多彩的公益活动，发</div>
			<div>挥新世界的主人公意识</div>
		</span>
		<span class="sec2_gridle">
			<img src="images/info3.png">
			<div>时尚的新理念，超前体验</div>
			<div>未知的生活</div>
		</span>
		<span class="sec2_gridle">
			<img src="images/info4.png">
			<div class="sec2_gridle_last">完善的培养机制，培养你</div>
			<div class="sec2_gridle_last">全新的世界观</div>
		</span>
	</section>

	<section class="sec3">
		<img src="images/logo.png" alt="Unknow">
		<h1>关于新世界，你不知道的还有什么？</h1>
	</section>

	<section class="sec4">
		<div class="sec4_cover"></div>
		<div class="sec4_uncover">
			<h1>查找新世界城市活动信息</h1>
			<div class="sec4_line"></div>
			<p>每个城市的有不同的活动信息，请自主查询您所需要了解的城市</p>
			<div class="sec4_region sec4_coutry" tabIndex="0">
				<span>国家</span>
				<ul>
					<li>中国</li>
					<li>波兰</li>
					<li>西班牙</li>
					<li>荷兰</li>
					<li>冰岛</li>
				</ul>
			</div>
			<div class="sec4_region sec4_province" tabIndex="0">
				<span>省份</span>
				<ul>
					<li>北京市</li>
					<li>天津市</li>
					<li>河北省</li>
					<li>陕西省</li>
					<li>浙江省</li>
				</ul>
			</div>
			<div class="sec4_region sec4_city" tabIndex="0">
				<span>城市</span>
				<ul>
					<li>不用JS</li>
					<li>就只能这样了</li>
					<li>不能选中</li>
					<li>各位观众老爷</li>
					<li>你们开心就好</li>
				</ul>
			</div>
			<div class="sec4_search">搜索</div>
		</div>	
	</section>

	<section class="sec5">
		<div class="sec5_gallery">
			<div>
				<img src="images/act_01.png">
				<h1>北京活动</h1>
				<h2>新社区大联盟</h2>
			</div>
			<div class="sec5_sh">
				<h1>上海活动</h1>
				<h2>夜上海新景观探索</h2>
				<img src="images/act_02.png">
			</div>
			<div>
				<img src="images/act_03.png">
				<h1>深圳活动</h1>
				<h2>全新海岸线观点站</h2>
			</div>
			<div>
				<img src="images/act_04.png">
				<h1>香港活动</h1>
				<h2>奢侈消费大派送</h2>
			</div>
		</div>
	</section>

	<section class="sec6">
		<div class="sec6_pic">
			<h2>新世界</h2>
			<h1>TIME</h1>
			<p>@新世界-北京</p>
			<p>2016.04.01</p>
		</div>
		
		<div class="sec6_word">
			<h1>新世界/<span>01</span></h1>
			<p>新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界</p>
			<div class="sec6_btn">更多详情</div>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</section>

	<section class="sec7">
		<div class="sec7_1">
			<p>新时代</p>
			<p>关于爱生活的我们</p>
			<div class="sec7_line"></div>
			<div class="sec7_btn">查看更多</div>
		</div>
		<div class="sec7_2">
			<p>新时代</p>
			<p>关于爱生活的我们</p>
			<div class="sec7_line"></div>
			<div class="sec7_btn">查看更多</div>
		</div>
		<div class="sec7_3">
			<div class="sec7_cover"></div>
		</div>
	</section>

	<section class="sec8">
		<h1>成为我们的志愿者</h1>
		<div class="sec8_line"></div>
		<p>新世界的大家庭需要每一个爱生活的人加入,如果你够年轻,有梦想,有激情那就不要犹豫,快来加入我们,成为改变所有人生活的人</p>
	</section>
	
	<section class="sec9">
        <div class="wrap">
    		<div class="sec9_left">
    			<div class="sec9_1">
    				<h1>新世界志愿者协议</h1>
    				<p>加入新世界志愿者的人员必须遵守中华人民共共和国的相关法律法规，并且本着平等资源的原则</p>
    				<div class="sec9_more"><img src="images/more.png">more</div>
    			</div>
    			<div class="sec9_2">
    				<h1>新世界志愿者权利</h1>
    				<p>新世界志愿者享受新世界内部所有资源共享的权利，并且享受所在地新世界活动的优先参与资格</p>
    				<div class="sec9_more"><img src="images/more.png">more</div>
    			</div>
    			<div class="sec9_3">
    				<h1>更多条款</h1>
    				<div class="sec9_more"><img src="images/more.png">more</div>
    			</div>
    		</div>
    		<div class="sec9_right">
    			<div class="sec9_name"><span>姓名：</span><input type="text" name="name"></div>
    			<div class="sec9_age"><span>年龄：</span><input type="text" name="age"></div>
    			<div class="sec9_contact"><span>联系方式：</span><input type="text" name="contact"></div>
    			<div class="sec9_address"><span>联系地址：</span><input type="text" name="address"></div>
    			<div class="sec9_life"><span>请简单描述您梦想的生活：</span><input type="text" name="life"></div>
                <div class="sec9_btn">提交申请</div>
            </div>
        </div>
    </section>
	<footer>
		<div class="contact">
			<h1>联系我们</h1>
			<p>为了更好的获取我们最新的产品资讯，
				您可以留下您的电子邮箱快速订阅我们的产品资讯</p>
			<p>也可以通过以下任何方式关注我们动态</p>
			<input type="email" name="email" placeholder="someone@email.com"><input type="submit" value="提交">
			<!-- 不换行即可消除两个input之间的小间距 -->
			<ul class="icon">
				<li><a href="#"><img src="images/qq.png" alt="QQ"></a></li>
				<li><a href="#"><img src="images/weibo.png" alt="Weibo"></a></li>
				<li><a href="#"><img src="images/twitter.png" alt="Twitter"></a></li>
				<li><a href="#"><img src="images/world.png" alt="World"></a></li>
			</ul>
		</div>
		<div class="bottom">
			<div class="copyright">&copy;2016新世界</div>
			<a href="#">back to top</a>
		</div>
	</footer>
</main>	

<footer>
	
</footer>

</body>
</html>